<template>
  <div>
    <div :id="echarts" :style="styles"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import {countSchoolCity} from "@/api/classai/countSchoolCity.ts";

  export default {
    name: 'index',
    props: {
      dataList: {
        type: Array,
        default: () => []
      },
      styles: {
        type: String,
        default: 'height:250px',
      },
      interval:{
        type:Number,
        default:0
      },
      seriesData: {
        type: Array,
        default: () => []
      },
      xAxis: {
        type: Array,
        default: () => []
      },
      echartsTitle: {
        type: String,
        default: ''
      },
      yAxisData: {
        type: Array,
        default: () => []
      },
      legendData: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        // styles: 'height:300px',
        infoLists: this.infoList,
        seriesArray: this.seriesData,
        cityData: []
      }
    },
    watch: {
      // seriesData: {
      //   handler(newVal, oldVal) {
      //     this.seriesArray = newVal;
      //     this.handleSetVisitChart();
      //   },
      //   deep: true // 对象内部属性的监听，关键。
      // }
    },
    computed: {
      echarts() {
        return 'echarts' + Math.ceil(Math.random() * 100)
      }
    },
    mounted: function () {
      const vm = this
      vm.$nextTick(() => {
        vm.getSchoolCity()
        window.addEventListener('resize', this.wsFunc)
      })
    },
    methods: {
      getSchoolCity() {
        countSchoolCity().then(res => {
          this.handleSetVisitChart(res.data);
        })
      },
      wsFunc() {
        this.myChart.resize()
      },
      handleSetVisitChart(dataList) {
        this.myChart = echarts.init(document.getElementById(this.echarts))
        let option = null
        option = {
          title: {
            // text: '异常航班原因统计',
            bottom: '2%',
            left: 'center',
            textStyle: { fontSize: 16 }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' }
          },
          xAxis: {
            data: dataList.map(it => it.city),
            axisLabel: {
              rotate: 20,  // 旋转角度
              interval: 0  // 强制显示所有标签
            }
          },
          yAxis: {},
          series: [{
            type: 'bar',
            barWidth: '30%',
            itemStyle: {
              normal: {
                color: function(params) {
                  var colorList = ['#2eddc1', '#FCCE10', '#E87C25', '#27727B','#9efdc6', '#f27C99', '#a27C99', '#27727B' ];
                  return colorList[params.dataIndex]
                },
              }
            },
            data:dataList.map(it => it.number)
          }]
        };

        // 基于准备好的dom，初始化echarts实例
        this.myChart.setOption(option, true)
      },
      handleResize() {
        this.myChart.resize()
      }
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.wsFunc)
      if (!this.myChart) {
        return
      }
      this.myChart.dispose()
      this.myChart = null
    }
  }
</script>

<style scoped>

</style>
